<template>
	<view v-if="type === 'orderCard'"
	      class="panel"
	>
		<h2 class="title cut"
        @tap="sheep.$router.go('/pages/order/list', { type: '0' })"
    >全部订单</h2>
		<view class="ss-order-menu-wrap ss-flex ss-col-center">
			<view
					v-for="item in orderMap"
					:key="item.title"
					class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
					@tap="sheep.$router.go(item.path, { type: item.value })"
			>
				<uni-badge
						:text="numData[item.type]"
						absolute="rightTop"
						class="uni-badge-left-margin"
						size="small"
				>
					<image :src="sheep.$url.static(item.icon)" class="item-icon" mode="aspectFit"></image>
				</uni-badge>
				<view class="menu-title ss-m-t-28">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
/**
 * 装修组件 - 订单菜单组
 */
import sheep from '@/sheep';
import {computed} from 'vue';

const props = defineProps({
	type: {
		type: Object,
		default() {
			return 'orderCard';
		},
	},
});

const orderMap = [
	{
		title: '中',
		value: '1',
		icon: 'https://img.js.design/assets/img/671f4ea58a08921ea2f70712.png#6df315f6f38ba9c9a989fa8f6e2ccc1b',
		path: '/pages/order/list',
		type: 'purchase',
	},
	{
		title: '已切成',
		value: '2',
		icon: 'https://marubuy-oss.oss-cn-beijing.aliyuncs.com/2024/11/087dbd8299d00b408fa9dd0d741391650d完成.png',
		path: '/pages/order/list',
		type: 'purchaseSuccess',
	},
	/*{
		title: '已到库',
		value: '3',
		icon: 'https://img.js.design/assets/img/671f50287dd312149e3690b4.png#de2c2961404fa40c68cbcb08175089b7',
		path: '/pages/order/list',
		type: 'storage',
	},
	{
		title: '待付运费',
		value: '4',
		icon: 'https://img.js.design/assets/img/671f5138df971bdf71889b7e.png#a4eada1baee08579aa8079a80cad1db1',
		path: '/pages/order/list',
		type: 'freight',
	},
	{
		title: '已发出',
		value: '5',
		icon: 'https://img.js.design/assets/img/671f52d7f7d5bb28b6516603.png#f77c09db5926d61f6031978084ff814e',
		path: '/pages/order/list',
    type: 'send'
	},*/
	{
		title: '已完成',
		value: '3',
		icon: 'https://marubuy-oss.oss-cn-beijing.aliyuncs.com/2024/12/117a0621cdaeda4c108fbf593b044d16e0已完成 (2).png',
		path: '/pages/order/list',
		type: 'complete'
	},
  {
    title: '已退款',
    value: '4',
    icon: 'https://img.js.design/assets/img/671f56eedf971bdf718a8977.png#67cae4f6172cb1caf6a24f2fdb829a46',
    path: '/pages/order/list',
    type: 'back'
  },
];

const numData = computed(() => sheep.$store('user').numData);
const numDataPre = computed(() => sheep.$store('user').numDataPre);
</script>

<style lang="scss" scoped>
.panel {

	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 30%;
	background-repeat: no-repeat;
	padding: 10rpx;

	.title {
		border-left: 5rpx solid #FE000F;
		padding-left: 15rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #3b3b3b;
		margin: 20rpx;
	}

	.cut {
		border-left: 5rpx solid #F39800;
	}

	.pre {
		border-left: 5rpx solid #459cff;
	}
}

.ss-order-menu-wrap {
	justify-content: space-around; // 确保项之间的间距均匀
	align-items: center; // 垂直居中对齐

	.menu-item {
		height: 160rpx;
		position: relative;
		z-index: 10;
		width: 23%; // 少于 25% 以考虑间距
		margin: 10rpx; // 添加一点间距以避免元素挤在一起

		.menu-title {
			font-size: 18rpx;
			line-height: 18rpx;
			color: #333333;
		}

		.item-icon {
			width: 44rpx;
			height: 44rpx;
		}

		.num-icon {
			position: absolute;
			right: 18rpx;
			top: 18rpx;
			// width: 40rpx;
			padding: 0 8rpx;
			height: 26rpx;
			background: #ff4d4f;
			border-radius: 13rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			.num {
				font-size: 24rpx;
				transform: scale(0.8);
			}
		}
	}
}
</style>
